<template>
	<view
		class="longpress"
		@longpress.stop="longpressEvent"
	>
		<slot/>
		<!-- #ifdef H5 || APP-PLUS -->
		<view
			v-if="show"
			class="dropdown"
			:style="dropdownStyle"
		>
		<!-- #endif -->
		<!-- #ifndef H5 || APP-PLUS -->
		<view
			v-if="show"
			class="dropdown"
			:style="{left:dropdownStyle.left, top:dropdownStyle.top, right:dropdownStyle.right, bottom:dropdownStyle.bottom, height:dropdownStyle.height}"
		>
		<!-- #endif -->
			<view class="mask" @click="onActionsHide"></view>
			<view
				class="li"
				hover-class="li-hover"
				v-for="(action, idx) in actions"
				:key="idx"
				@click="onActions(idx)"
			>
				{{action}}
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props: {
			'actions':{type:Array}
		},
		data(){
			return{
				show: false,
				dropdownStyle: {
					right: '10px',
					top: '100%'
				}
			}
		},
		methods:{
			longpressEvent(e){
				if(!this.actions.length)return false
				const system = uni.getSystemInfoSync()
				const dropboxHeight = this.actions.length * 36 + 5
				const is_overflow_x = system.windowWidth - e.touches[0].clientX <= 140
				
				// #ifdef H5 || APP-PLUS
				const is_overflow_top = e.touches[0].clientY <= dropboxHeight
				const is_overflow_bottom = system.windowHeight - e.touches[0].clientY <= dropboxHeight
				this.dropdownStyle = {
					left: is_overflow_x ? 'auto' : e.touches[0].clientX + 'px',
					top: is_overflow_bottom ? 'auto' : e.touches[0].clientY + system.windowTop + 'px',
					right: system.windowWidth - e.touches[0].clientX + 'px',
					bottom: is_overflow_top ? 'auto' : system.windowHeight - e.touches[0].clientY + 'px',
					height: dropboxHeight + 'px'
				}
				// #endif
				
				// #ifndef APP-PLUS || H5
				const is_overflow_y = system.windowHeight - e.touches[0].clientY <= dropboxHeight
				this.dropdownStyle = {
					left: is_overflow_x ? 'auto' : e.touches[0].clientX + 'px',
					top: is_overflow_y ? 'auto' : e.touches[0].clientY + 'px',
					right: system.windowWidth - e.touches[0].clientX + 'px',
					bottom: system.windowHeight - e.touches[0].clientY + 'px',
					height: dropboxHeight + 'px'
				}
				// #endif
				this.show = true
			},
			onActions(i){
				this.$emit('actionTap', i)
				this.onActionsHide()
			},
			onActionsHide(){
				this.show = false
				this.$emit('actionsHide')
			}
		}
	}
</script>

<style lang="scss">
	.longpress{
		.dropdown{
			position: fixed;
			right: 0;
			top: 100%;
			border-radius: 5upx;
			box-shadow: 0 0 20upx rgba(0,0,0,0.1);
			padding: 10upx 0;
			z-index: 9;
			background-color: #fff;
			margin: -20upx 0 0;
			width: 130px;
			display: flex;
			flex-direction: column;
			.li{
				flex: 1;
				padding: 0 30upx;
				position: relative;
				z-index: 2;
				display: flex;
				align-items: center;
			}
			.li-hover{
				opacity: 0.7;
				background-color: #f9f9f9;
			}
			.mask{
				position: fixed;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				z-index: 1;
			}
		}
	}
</style>
